<template>
  <div class="app-container">
    <list-page>
      <template #search>
        <list-search v-model="searchForm" @search="search">
          <el-form-item label="角色">
            <el-input :value="rowData.name" disabled />
          </el-form-item>
          <el-form-item label="用户名称" prop="like.user_name" class="w-220px">
            <el-input v-model="searchForm.like.user_name" placeholder="请输入用户名称" clearable />
          </el-form-item>
          <el-form-item label="手机号码" prop="like.phone" class="w-220px">
            <el-input v-model="searchForm.like.phone" placeholder="请输入手机号码" clearable />
          </el-form-item>
        </list-search>
      </template>

      <template #actions>
        <el-button type="primary" plain icon="Plus" @click="selectShow = true" v-hasPerm="['system:role:auth-list']"
          >添加用户</el-button
        >
        <el-button
          type="danger"
          plain
          icon="CircleClose"
          @click="cancelAuthUser"
          v-hasPerm="['system:role:auth-list']"
          :disabled="!ids.length"
          >批量取消授权</el-button
        >
        <el-button type="warning" plain icon="Close" @click="close">关闭</el-button>
      </template>

      <el-table v-loading="loading" :data="listData" @selection-change="handleSelection">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="用户名称" prop="user_name" show-overflow-tooltip />
        <el-table-column label="用户昵称" prop="nick_name" show-overflow-tooltip />
        <el-table-column label="邮箱" prop="email" show-overflow-tooltip />
        <el-table-column label="手机" prop="phone" show-overflow-tooltip />
        <el-table-column label="状态" align="center" prop="status">
          <template #default="scope">
            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="create_time" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding">
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="CircleClose"
              @click="cancelAuthUser(scope.row)"
              v-hasPerm="['system:role:auth-list']"
              >取消授权</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </list-page>

    <select-user v-model="selectShow" :role-id="searchForm.roleId" @submit="getList" v-if="selectShow" />
  </div>
</template>

<script setup name="AuthUser">
  import { authUsersListApi, cancelAuthUserApi, infoRoleApi } from '@/api/system/role'
  import SelectUser from './selectUser.vue'

  const route = useRoute()
  const { proxy } = getCurrentInstance()

  const searchForm = ref({
    pageNum: 1,
    pageSize: 10,
    roleId: route.params.roleId,
    like: { user_name: undefined, phone: undefined }
  })
  const selectShow = ref(false)
  const { sys_normal_disable } = proxy.useDict('sys_normal_disable')

  onMounted(() => {
    const roleId = route.params?.roleId || ''
    if (!roleId) {
      proxy.$modal.msgWarning('参数错误')
      close()
      return
    }
    searchForm.roleId = roleId
    getRowData()
  })

  // 根据参数获取角色信息
  const rowData = ref({})
  async function getRowData() {
    try {
      const { info } = await infoRoleApi(searchForm.roleId)
      rowData.value = info
      getList()
    } catch (error) {
      close()
    }
  }

  // 查询授权用户列表
  const loading = ref(false)
  const listData = ref([])
  const total = ref(0)
  function getList() {
    loading.value = true
    authUsersListApi(searchForm.value).then(res => {
      listData.value = res?.list || []
      total.value = res?.total || 0
      loading.value = false
    })
  }

  //返回按钮
  function close() {
    const obj = { path: '/system/role' }
    proxy.$tab.closeOpenPage(obj)
  }

  // 搜索按钮操作
  function search() {
    searchForm.value.pageNum = 1
    getList()
  }

  //多选框选中数据
  const ids = ref([])
  function handleSelection(selection) {
    ids.value = selection.map(item => item.id)
  }

  // 取消授权按钮操作
  function cancelAuthUser(row) {
    let title = '是否取消选中用户授权数据项'
    let adminIds = ''
    if (row && row.id) {
      title = '确认要取消该用户"' + row.user_name + '"角色吗？'
      adminIds = row.id
    } else {
      adminIds = ids.value.join(',')
    }
    if (!adminIds) return proxy.$modal.msgWarning('参数缺失')
    const roleId = searchForm.value.roleId
    proxy.$modal
      .confirm(title)
      .then(function () {
        return cancelAuthUserApi(roleId, adminIds)
      })
      .then(() => {
        getList()
        proxy.$modal.msgSuccess('取消授权成功')
      })
      .catch(() => {})
  }
</script>
